<template>
  <section class="section">
    <h2 class="section-title">最新动态</h2>
    <div class="posts-grid">
      <article class="post-card">
        <img src="https://images.pexels.com/photos/34110022/pexels-photo-34110022.jpeg?auto=compress&cs=tinysrgb&h=200" alt="公司荣获年度创新企业奖" class="card-img" @error="handleImageError">
        <div class="card-content">
          <h3>公司荣获年度创新企业奖</h3>
          <p class="post-meta">发布于 2023年10月15日 | 行业新闻</p>
          <p class="post-desc">在昨日举行的年度科技峰会上，我司凭借在人工智能领域的突破性创新，荣获"年度最具创新力企业"大奖。</p>
        </div>
      </article>
      <article class="post-card">
        <img src="https://images.pexels.com/photos/3184418/pexels-photo-3184418.jpeg?auto=compress&cs=tinysrgb&h=200" alt="新办公室乔迁之喜" class="card-img" @error="handleImageError">
        <div class="card-content">
          <h3>新办公室乔迁之喜</h3>
          <p class="post-meta">发布于 2023年9月28日 | 公司动态</p>
          <p class="post-desc">为适应快速发展需要，公司正式迁入位于市中心的全新办公大楼，办公环境和设施全面升级。</p>
        </div>
      </article>
      <article class="post-card">
        <img src="https://images.pexels.com/photos/34234300/pexels-photo-34234300.png?auto=compress&cs=tinysrgb&h=200" alt="技术团队参加国际开发者大会" class="card-img" @error="handleImageError">
        <div class="card-content">
          <h3>技术团队参加国际开发者大会</h3>
          <p class="post-meta">发布于 2023年9月12日 | 技术分享</p>
          <p class="post-desc">我司技术团队受邀参加国际开发者大会，分享在微服务架构和云原生技术方面的实践经验。</p>
        </div>
      </article>
    </div>
  </section>
</template>

<script setup>
// 最新动态页面
const handleImageError = (event) => {
  event.target.src = 'https://images.pexels.com/photos/3184454/pexels-photo-3184454.jpeg?auto=compress&cs=tinysrgb&h=200'
}
</script>

<style scoped>
.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}

.post-card {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.post-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card-content {
  padding: 1.5rem;
}

.card-content h3 {
  margin-bottom: 0.5rem;
  color: #2c3e50;
}

.post-meta {
  color: #3498db;
  font-weight: 500;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.post-desc {
  color: #666;
  line-height: 1.6;
}
</style>